<template>
  <div class="order-detail-container container">
    <div class="page-title">
      <h2>订单详情</h2>
      <el-button @click="goBack" icon="el-icon-back">返回</el-button>
    </div>
    
    <div v-loading="loading" class="order-card">
      <template v-if="orderInfo.orderNo">
        <!-- 订单基本信息 -->
        <div class="order-header">
          <div class="order-no">
            <span>订单编号：{{ orderInfo.orderNo }}</span>
            <el-tag :type="getStatusType(orderInfo.status)">{{ orderInfo.statusName }}</el-tag>
        </div>
          <div class="order-time">下单时间：{{ formatDateTime(orderInfo.orderTime) }}</div>
      </div>
      
        <!-- 车辆信息 -->
        <div class="section vehicle-info">
          <h3>车辆信息</h3>
          <div class="info-content">
            <div class="vehicle-name">{{ orderInfo.vehicleName }}</div>
            <div class="rent-period">
              <span>租车时间：{{ formatDateTime(orderInfo.startTime) }} 至 {{ formatDateTime(orderInfo.endTime) }}</span>
            </div>
            </div>
      </div>
      
        <!-- 费用信息 -->
        <div class="section fee-info">
          <h3>费用信息</h3>
          <div class="info-content">
            <div class="fee-item">
              <span>订单总额</span>
              <span class="price">¥{{ orderInfo.amount }}</span>
          </div>
        </div>
      </div>
      
        <!-- 支付信息 -->
        <div v-if="orderInfo.status >= 2" class="section payment-info">
          <h3>支付信息</h3>
          <div class="info-content">
            <div class="payment-item">
              <span>支付方式</span>
              <span>{{ getPayTypeName(orderInfo.payType) }}</span>
            </div>
            <div class="payment-item">
              <span>支付时间</span>
              <span>{{ formatDateTime(orderInfo.payTime) }}</span>
            </div>
            <div class="payment-item">
              <span>支付流水号</span>
              <span>{{ orderInfo.payNo }}</span>
            </div>
            </div>
            </div>
        
        <!-- 操作按钮 -->
        <div class="order-actions">
          <el-button v-if="orderInfo.status === 1" type="primary" @click="handlePay">去支付</el-button>
          <el-button v-if="orderInfo.status === 1" @click="handleCancel">取消订单</el-button>
      </div>
      </template>
      
      <div v-else class="empty-data">
        <el-empty description="暂无订单信息"></el-empty>
      </div>
    </div>
    
    <!-- 支付对话框 -->
    <el-dialog title="订单支付" :visible.sync="payDialogVisible" width="400px">
      <div class="pay-dialog">
        <div class="order-info">
          <p>订单编号：{{ orderInfo.orderNo }}</p>
          <p>车辆名称：{{ orderInfo.vehicleName }}</p>
          <p class="pay-amount">支付金额：<span>¥{{ orderInfo.amount }}</span></p>
        </div>
        <div class="pay-method">
          <p>请选择支付方式：</p>
          <el-radio-group v-model="payMethod">
            <el-radio :label="1">支付宝</el-radio>
            <el-radio :label="2">微信</el-radio>
            <el-radio :label="3">银行卡</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="payDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmPay" :loading="payLoading">确认支付</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderDetail, cancelOrder, payOrder } from '@/api/order'

export default {
  name: 'OrderDetail',
  data() {
    return {
      // 订单编号
      orderNo: '',
      // 订单信息
      orderInfo: {},
      // 加载状态
      loading: false,
      // 支付对话框
      payDialogVisible: false,
      // 支付方式
      payMethod: 1,
      // 支付加载状态
      payLoading: false
    }
  },
  created() {
    this.orderNo = this.$route.params.orderNo
    if (this.orderNo) {
      this.getOrderInfo()
    }
  },
  methods: {
    // 获取订单详情
    getOrderInfo() {
      this.loading = true
      getOrderDetail(this.orderNo)
        .then(response => {
          this.orderInfo = response.data
        })
        .catch(error => {
          this.$message.error(error.message || '获取订单详情失败')
        })
        .finally(() => {
        this.loading = false
        })
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    
    // 取消订单
    handleCancel() {
      this.$confirm('确认取消该订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelOrder(this.orderNo)
          .then(() => {
          this.$message.success('订单取消成功')
            this.getOrderInfo()
          })
          .catch(error => {
            this.$message.error(error.message || '订单取消失败')
          })
      }).catch(() => {})
    },
    
    // 支付订单
    handlePay() {
      this.payDialogVisible = true
    },
    
    // 确认支付
    confirmPay() {
      this.payLoading = true
      payOrder({
        orderNo: this.orderNo,
        payType: this.payMethod
      })
        .then(() => {
          this.$message.success('支付成功')
          this.payDialogVisible = false
          this.getOrderInfo()
        })
        .catch(error => {
          this.$message.error(error.message || '支付失败')
        })
        .finally(() => {
          this.payLoading = false
        })
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      const second = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    
    // 获取状态对应的类型
    getStatusType(status) {
      switch (status) {
        case 1: return 'warning'  // 待支付
        case 2: return 'success'  // 已支付
        case 3: return 'info'     // 已取消
        case 4: return 'success'  // 已完成
        case 5: return 'primary'  // 已取车
        case 6: return 'success'  // 已还车
        default: return 'info'
      }
    },
    
    // 获取支付方式名称
    getPayTypeName(payType) {
      switch (payType) {
        case 1: return '支付宝'
        case 2: return '微信'
        case 3: return '银行卡'
        default: return '未知'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-container {
  padding: 20px 0;
  
  .page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
      margin: 0;
    }
  }
  
  .order-card {
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .order-header {
      padding-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
      
      .order-no {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .order-time {
        color: #909399;
      }
    }
    
    .section {
      padding: 20px 0;
      border-bottom: 1px solid #ebeef5;
      
      h3 {
        font-size: 16px;
        margin: 0 0 15px 0;
      }
      
      .info-content {
        color: #606266;
        
      .vehicle-name {
          font-size: 18px;
          font-weight: bold;
        margin-bottom: 10px;
      }
      
        .rent-period {
          margin-bottom: 10px;
        }
        
        .fee-item, .payment-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          
          .price {
            color: #f56c6c;
            font-weight: bold;
            font-size: 18px;
        }
      }
    }
  }
  
  .order-actions {
    margin-top: 30px;
    text-align: center;
    }
    
    .empty-data {
      padding: 50px 0;
    }
  }
  
  .pay-dialog {
    .order-info {
      margin-bottom: 20px;
      
      p {
        margin: 10px 0;
      }
      
      .pay-amount {
        font-weight: bold;
        
        span {
          color: #f56c6c;
          font-size: 18px;
        }
      }
    }
    
    .pay-method {
      p {
        margin-bottom: 10px;
      }
    }
  }
}
</style> 